<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相册管理系统</title>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        #butadd {
            background-color: #4a6bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        #butadd:hover {
            background-color: #3a5bef;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        #add {
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            display: none;
        }
        
        
        #add h3 {
            color: #4a6bff;
            margin-bottom: 15px;
            font-weight: 500;
        }
        
        #addname {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 10px 0;
            font-size: 16px;
        }
        
        #adddata {
            margin: 15px 0;
        }
        
        #add button {
            background-color: #4a6bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        #add button:hover {
            background-color: #3a5bef;
        }
        
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }
        
        .gallery > div {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .gallery > div:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .gallery img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
        
        .gallery div > div:last-child {
            padding: 15px;
        }
        
        .gallery p {
            font-size: 16px;
            color: #444;
            margin-bottom: 15px;
            font-weight: 500;
        }
        
        .gallery button {
            background-color: #ff4a4a;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            width: 100%;
        }
        
        .gallery button:hover {
            background-color: #e63c3c;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }
        
        @media (max-width: 480px) {
            .gallery {
                grid-template-columns: 1fr;
            }
            
            body {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <button onclick="qie()">切换到贴吧</button>
    <button id="butadd">添加相册</button>
    
    <div id="add">
        <h3>添加新相册</h3>
        标题: <input type="text" id="addname" placeholder="输入相册标题">
        <input type="file" id="adddata">
        <button onclick="add()">确认添加</button>
    </div>
    <div id="xiu">
        <h3>修改相册</h3>
        标题: <input type="text" id="xiuname" placeholder="输入相册标题">
        <input type="file" id="xiudata">
        <button onclick="xiu()">确认修改</button>
    </div>
    <div class="gallery"></div>
    <script>
        // 显示/隐藏添加表单
        $("#butadd").click(function() {
            $("#add").slideToggle();
        });
        $("#xiu").hide();
        

        
        // 渲染相册
        function all() {
            var id = localStorage.getItem("id");
            $.ajax({
                url: "http://localhost:3001/users/data",
                type: "post",
                data: { id: id },
                success: function(data) {
                    console.log(data.data);
                    var html = "";
                    data.data.forEach(function(item) {
                        html += `
                            <div>
                                <div>
                                    <img src="${item.cover}" width="100px">
                                </div>
                                <div>
                                    <p>${item.title}</p>
                                </div>
                                <button onclick="del(${item.id})">删除</button>
                                <button onclick="xian(${item.id})">修改</button>
                            </div>
                        `;
                    });
                    $(".gallery").html(html);
                }
            });
        }
        all();
        
        // 添加相册
        function add(){
            var id = localStorage.getItem("id");
            var title = $("#addname").val();
            var file = $("#adddata")[0].files[0];
            console.log(file);
            
            if (title) {
                var formData = new FormData();
                formData.append("title", title);
                formData.append("userid", id);
                formData.append("file", file);
                
                $.ajax({
                    url: "http://localhost:3001/users/add",
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        if (data.code == 200) {
                            alert("图片添加成功");
                            all();
                        } else {
                            alert("图片添加失败");
                        }
                    }
                });
            } else {
                alert("标题不能为空");
            }
        }
        
        //删除相册
        function del(id){
            if(confirm("确定要删除这个相册吗？")) {
                $.ajax({
                    url: "http://localhost:3001/users/delete",
                    type: "post",
                    data: { id: id },
                    success: function(data) {
                        if (data.code == 200) {
                            alert("图片删除成功");
                            all();
                        } else {
                            alert("图片删除失败");
                        }
                    }
                });
            }
        }

        var iid
        function xian(id) {
           $("#xiu").show(); 
           iid=id
        };
        function xiu(){
            console.log(iid);
            var id=iid
            var title = $("#xiuname").val();
            var file = $("#xiudata")[0].files[0];
            // console.log(file);
            
            if (title) {
                var formData = new FormData();
                formData.append("title", title);
                formData.append("id", id);
                formData.append("file", file);
                
                $.ajax({
                    url: "http://localhost:3001/users/update",
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        if (data.code == 200) {
                            alert("图片修改成功");
                            all();
                        } else {
                            alert("图片修改失败");
                        }
                    }
                });
            } else {
                alert("标题不能为空");
            }
            
        }
        function qie(){
            window.location.href = './tieba.html';
        }
    </script>
</body>
</html>